<template>
  <div class="app">
    <!-- 
      组件的自定义事件:
        1.一种组件间通信的方式, 适用于: 子组件 => 父组件

        2.使用场景: A是父组件, B是子组件, B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)

        3.绑定自定义事件
          1.第一种方式: 在父组件中, <demo @aiguigu="test" /> 或者 <demo v-on:aiguigu="test" />
          2.第二种方式: 在父组件中:
            <demo ref="demo" />
            mounted () {
              this.$refs.demo.$on('atguigu', this.test)
            }
          3.若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法

        4.触发自定义事件: this.$emit('atguigu', 数据)
        
        5.解除自定义事件: this.$off('atguigu')

        6.组件上也可以绑定原生DOM事件, 需要使用native修饰符

        7.注意: 通过this.$refs.xxx.$on('atguigu', 回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出现问题
     -->


    <h2>{{ msg }}, 学生姓名是: {{  }}</h2>
    <!-- 通过父组件给子组件传递函数类型的Props实现: 子给父传递数据 -->
    <school :getSchoolName="getSchoolName"></school>
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义事件实现: 子给父传递数据 (第一种写法, 使用@或v-on) -->
    <student  @click.native="show" @atguigu.once="getStudentName" @demo="m1"></student>

    <!-- 通过父组件给子组件绑定一个自定义事件实现: 子给父传递数据 (第二种写法, 使用ref)-->
    <!-- <student ref="student"></student> -->
  </div>
</template>

<script>
    //引入组件
    import student from './components/student.vue'
    import school from './components/school.vue'
    export default {
      name: 'App',
      data () {
        return {
          msg: '欢迎学习vue',
          studentName: ''
        }
      },
      components: {
        student,
        school
      },
      methods: {
        getSchoolName (name) {
          console.log('app收到了学校名:', name)
        },
        //除了要用的name,剩下的参数在params数组里面
        getStudentName (name,...params) {
          this.studentName = name
          console.log('app收到了学生名', name, params)
        },
        m1 () {
          console.log('demo事件被触发了')
        },
        show () {
          alert(123)
        }
      },
      mounted () {
        // setTimeout(() => {
        //   this.$refs.student.$on('atguigu', this.getStudentName)
        // }, 3000);
        // this.$refs.student.$on('atguigu', this.getStudentName)
        //只触发一次
        this.$refs.student.$once('atguigu', this.getStudentName)
        let that = this
        this.$refs.student.$on('atguigu', function (name, ...params){
          console.log('app收到了学生名', name, params)
          that.studentName = name
        })
      }
    }
</script>

<style>
  .app {
    background: grey;
    padding: 5px;
  }
</style>